<!DOCTYPE html>

<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
        <script src="../js/jquery.min.js"></script>
        <script src="../js/axios-0.18.0.js"></script>
        <script src="../js/vue.js"></script>
        <script src="../plugins/elementui/index.js"></script>
        <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=1j6EsGUMVRcrUm1fq7ba7yHISWyqvwhI"></script>
    </head>
    <body >
        <div id="app">
            <template>
                <div id="r-result">
                    <el-input placeholder="公司地址"
                              v-model="address"
                              style="width: 360px;"
                              class="filter-item"
                              id="suggestId"
                              type="text"
                    ></el-input>
                    <el-button type="primary" @click="addressAdd()">确定</el-button>
                </div>
                <div>&nbsp;</div>
                <!--百度地图容器-->
                <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                <div style="width:99%;height:430px;border:#40A040 solid 1px;" id="l-map"></div>
            </template>
        </div>
    </body>
    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                address: "",
                longitude: 0,
                latitude: 0
            },
            methods: {
                addressAdd() {
                    this.address = myValue;
                    var peram = {
                        address:this.address,
                        longitude:point.lng,
                        latitude:point.lat
                    };
                    axios.post("/address/add.do", peram).then((res) => {
                        if (res.data.flag) {
                            //弹出提示信息
                            this.$message({
                                type: 'success',
                                message: res.data.message
                            });
                            parent.location.reload();
                        } else {
                            this.$message.error(res.data.message);
                        }
                    });
                }
            }
        })
    </script>
</html>
<script type="text/javascript">

    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("l-map");
    map.centerAndZoom("成都", 11);                   // 初始化地图,设置城市和地图级别。
    map.setCurrentCity("成都");
    map.enableScrollWheelZoom(true);
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId"
            ,"location" : map
        });

    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        G("searchResultPanel").value = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        setPlace();
    });

    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
        var myGeo = new BMap.Geocoder();
        myGeo.getPoint(myValue, function (point) {
            window.point = point;
        }, "成都市");
    }
</script>

